<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style type="text/css">
        * {
            margin: 0px;
            /*外边距*/
            padding: 0px;
            /*内边距*/
        }

        ul,
        li {
            list-style: none;
        }

        body {
            background: url("images/bg_04.jpg");
            background-size: cover;
        }

        #message {
            width: 600px;
            /*宽度*/
            height: 170px;
            /*高度 px像素 pt em vh*/
            background: #fff;
            margin: 200px auto 0;
            /*上  左右  下*/
            border-radius: 5px;
            /*css3 圆角*/
        }

        #message p {
            font-size: 12px;
            /*字体大小*/
            font-family: "微软雅黑";
            /*字体类型*/
            color: #666;
            height: 40px;
            /*border:1px solid #000;/*边框 宽度 风格 颜色*/
            line-height: 40px;
            text-indent: 20px;
            /*首行缩进*/
        }

        #message .edit {
            background: lightblue;
            padding-top: 5px;
            padding-left: 5px;
            padding-right: 5px;
            width: 560px;
            height: 70px;
            border: 1px solid #ccc;
            margin: 0 auto;
        }

        #message .but {
            width: 560px;
            height: 40px;
            /*border:1px solid #000;*/
            margin: 15px auto 0;
            position: relative;
            /*参照物*/
        }

        #message .but .msg_but {
            width: 80px;
            height: 30px;
            background: #7db718;
            display: inline-block;
            /*行间块级 block块级  none隐藏 inline行间*/
            font-size: 12px;
            color: #fff;
            font-family: "微软雅黑";
            text-align: center;
            /*对齐方式*/
            line-height: 30px;
            border-radius: 3px;
            float: right;
        }

        #message .but .imgface {
            cursor: pointer;
            /*指针形状*/
        }

        #message .but .msg_but {
            cursor: pointer;
            /*指针形状*/
        }

        #message .but .face {
            width: 395px;
            height: 160px;
            background: #fff;
            border: 1px solid #ddd;
            position: absolute;
            top: 20px;
            left: 20px;
            padding: 10px;
            display: none;
        }

        #message .but .face ul li {
            width: 22px;
            height: 22px;
            float: left;
            margin: 8px;
        }

        .msgBox {
            width: 600px;
            margin: 15px auto;
        }

        .msgBox .msgInfo {
            width: 580px;
            background: #fff;
            padding: 10px;
            margin-bottom: 10px;
        }

        .msgBox .msgInfo dl {
            width: 100%;
            height: 60px;
            border-bottom: 1px solid #ddd;
        }

        .msgBox .msgInfo dl dt {
            width: 50px;
            height: 50px;
            float: left;
        }

        .msgBox .msgInfo dl dd {
            width: 500px;
            height: 50px;
            line-height: 50px;
            font-family: "微软雅黑";
            font-size: 14px;
            float: right;
        }

        .msgBox .msgInfo .con {
            font-size: 12px;
            line-height: 20px;
            font-family: "微软雅黑";
        }
    </style>

</head>

<body>
    <div id="message">
        <!-- <p>有什么新鲜事想告诉大家?</p> -->
        <p>说点儿新鲜事儿吧</p>
        <div class="edit" contenteditable="true"></div>
        <!--编辑区域-->
        <div class="but">
            <img src="images/受虐滑稽.png" style="width: 30px; height: 30px;" class="imgface" />
            <span class="msg_but">发表</span>
            <div class="face">
                <ul>
                    <li><img src="images/COS 滑稽.png" alt="" style="width: 30px; height: 30px;"></li>
                    <li><img src="images/拥抱.png" alt="" style="width: 30px; height: 30px;"></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="msgBox">
    </div>


    <!-- <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> -->
    <script src="./jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        //展开表情
        $(".imgface").click(function (e) {
            $(".face").slideDown();   //向下展开
            e.stopPropagation();   //阻止冒泡
        });
        $(document).click(function () {
            $(".face").slideUp();  //向上收缩
        });
        //点击表情
        $(".face ul li").click(function () {
            var _img = $(this).find("img").clone();  //当前   img  find()   查找 找到
            $(".edit").append(_img);  //追加 
        });
        $(".msg_but").click(function () {
            var _txt = $(".edit").html();  //获取当前编辑区域的内容（包括标签）
            if (_txt == "") {
                $(".edit").focus();  //获取焦点
            }
            else {
                $(".msgBox").append("<div class='msgInfo'><dl><dt><img src='images/lisa3 (3).jpg' width='46' height='46'/></dt><dd>IT潇潇</dd></dl><div class='con'>" + _txt + "</div></div>");
                $(".edit").html("");
            }
        });
    </script>
</body>

</html>